<script>
  import axios from 'axios'
  import {formatDate} from "../../../common/common";
  import {readingcheck} from '@/api/readingmanagement/reading'

  export default {
    name: "ReadingCheckout",
    data() {
      return {
        tableData: {},
      }
    },
    methods: {
      handleaudio(row, index) {
        console.log(index);
        var play = document.getElementsByTagName('audio');
        for (var i = 0; i < this.tableData.messList.length; i++) {
          if (i == index) {
            if (!row.flag) {
              play[i].play();
              row.flag = true;
            } else {
              play[i].pause();
              row.flag = false;
            }
          } else {
            play[i].pause();
            this.tableData.messList[i].flag = false;
          }
        }
      },
      getDetailInfo() {
        localStorage.teacherindex = this.$route.params.index === undefined ? localStorage.teacherindex : this.$route.params.index;
        let id = localStorage.teacherindex;
        readingcheck(id).then(this.reading);
      },
      reading(res) {
        for (let i = 0; i < res.data.messList.length; i++) {
          res.data.messList[i].flag = false;
        }
        this.tableData = res.data;
        console.log(this.tableData);
      },
      goback() {
        this.$router.push({
          path: '/1'
        })
      },
    },
    created() {
      this.getDetailInfo();
    }
  }
</script>

<template>

  <div class="wrapper">
    <el-breadcrumb separator="/" class="title">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{path:'/1'}">跟读管理</el-breadcrumb-item>
        <el-breadcrumb-item :to="{path:'/1'}">跟读列表</el-breadcrumb-item>
        <el-breadcrumb-item>跟读查看</el-breadcrumb-item>
      </el-breadcrumb>
    </el-breadcrumb>
    <div class="content">
      <el-form label-width="100px">
        <el-form-item label="标题" class="form">
          <el-input v-model="tableData.title" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="封面图片">
          <img :src="tableData.nameImg" alt="">
        </el-form-item>
        <el-form-item label="跟读内容">
          <el-table :data="tableData.messList" style="width: 100%">
            <el-table-column type="index" label="序号" width="50"></el-table-column>
            <el-table-column prop="messEN" label="英文" width="240"></el-table-column>
            <el-table-column prop="messCN" label="中文" width="260"></el-table-column>
            <el-table-column label="播放录音" width="120">
              <template slot-scope="scope">
                <el-button @click="handleaudio(scope.row,scope.$index)" :type="scope.row.flag?'danger':'primary'">
                  {{scope.row.flag?'暂停录音':'播放录音'}}
                </el-button>
              </template>
            </el-table-column>
            <el-table-column width="0">
              <template slot-scope="scope">
                <audio :src="scope.row.mess"></audio>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
        <el-form-item label="发布老师">
          <el-input v-model="tableData.teachername" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="老师寄语">
          <el-input v-model="tableData.message" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="上线日期">
          <el-date-picker class="setuptime"
                          v-model="tableData.uploadTime"
                          type="date" :disabled="true">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="goback">返回</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>


<style lang="less" scoped>
  @import "~styles/z.less";
  @import "~styles/css3.less";
  @import "~styles/variables.less";

  .wrapper {
    .w100;
  }

  img {
    width: 150px;
    height: 150px;
  }

  /deep/ .el-form-item__label {
    .star;
  }

  /deep/ .el-input__inner {
    height: 43px;
    font-size: 13px;
    width: 300px;
  }
</style>
